<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>svg guitar</title>
		<meta name="description" content="" />
		<meta name="piano__keywords" content="" />
		<meta name="" content="" />
		<link rel="shortcut icon" href="">
		<link href="https://fonts.googleapis.com/css?family=Quicksand:700|Arapey" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/instruments.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<!-- polyfills -->
		<script src="js/inc/shim/Base64.js" type="text/javascript"></script>
		<script src="js/inc/shim/Base64binary.js" type="text/javascript"></script>
		<script src="js/inc/shim/WebAudioAPI.js" type="text/javascript"></script>
		<!-- midi.js package -->
		<script src="js/midi/audioDetect.js" type="text/javascript"></script>
		<script src="js/midi/gm.js" type="text/javascript"></script>
		<script src="js/midi/loader.js" type="text/javascript"></script>
		<script src="js/midi/plugin.audiotag.js" type="text/javascript"></script>
		<script src="js/midi/plugin.webaudio.js" type="text/javascript"></script>
		<script src="js/midi/plugin.webmidi.js" type="text/javascript"></script>
		<!-- utils -->
		<script src="js/util/dom_request_xhr.js" type="text/javascript"></script>

		<!--[if IE]>
  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<script>document.documentElement.className = 'js';</script>
	</head>
	<body>
		<main>
			<section class="content content--instrument content--guitar content--cursor-dark">
				<div class="content__inner content__inner--medium flexy flexy--center">
					<h2 class="content__title">Guitar</h2>
					<p class="content__subtitle content__subtitle--light">拨动你的心弦</p>
					<a href="#" class="link-more">More</a>
				</div>
				<div class="guitar instrument">
					<svg class="guitar__inner" preserveAspectRatio="xMinYMax meet" xmlns:note="http://tympanus.net/codrops" viewBox="0 0 1440 780">
						<path class="guitar__body" d="M-130.9,612.4c0-280,106.5-487.9,356.5-487.9c250,0,347.8,167.6,428.3,167.6c80.4,0,223.9-72.1,350-17
						c126.1,55.2,132.6,275.8,132.6,333.1c0,57.3-6.5,277.9-132.6,333.1c-126.1,55.2-269.6-17-350-17c-80.4,0-178.3,167.6-428.3,167.6
						C-24.4,1091.8-130.9,892.4-130.9,612.4z" />
						<path class="guitar__middle" d="M575.7,608.1c0,79.1,64.5,143.6,143.6,143.6c79.1,0,143.6-64.5,143.6-143.6c0-79.1-64.5-143.6-143.6-143.6
						C640.2,464.5,575.7,529,575.7,608.1z" />
						<path class="guitar__neck" d="M842.7,671.9V544.3h1087.6v127.6H842.7z" />
						<path class="guitar__stringcut" d="M223.3,487.6v249.1c0,71.5-32.3,33.9-38.7,72.9h-15.6c-7.5,0-13.6-5.4-13.6-12V427.3c0-6.6,6.1-12,13.6-12h15.6
						C191,454.3,223.3,417,223.3,487.6z" />
						<g class="guitar__string-wrap">
							<rect class="guitar__string-hover" note:id="19" x="184.5" y="547.6" width="1740.7" height="13.2">
							</rect>
							<line class="guitar__string" x1="1925.2" y1="554.2" x2="183.6" y2="554.2" />
						</g>
						<g class="guitar__string-wrap">
							<rect class="guitar__string-hover" note:id="24" x="184.5" y="569.3" width="1740.7" height="13.2">
							</rect>
							<line class="guitar__string" x1="1925.2" y1="575.9" x2="183.6" y2="575.8" />
						</g>
						<g class="guitar__string-wrap">
							<rect class="guitar__string-hover" note:id="29" x="184.5" y="590.5" width="1740.7" height="13.2">
							</rect>
							<line class="guitar__string" x1="1925.2" y1="597.5" x2="183.6" y2="597.4" />
						</g>
						<g class="guitar__string-wrap">
							<rect class="guitar__string-hover" note:id="34" x="184.5" y="612.5" width="1740.7" height="13.2">
							</rect>
							<line class="guitar__string" x1="1925.2" y1="619.1" x2="183.6" y2="619" />
						</g>
						<g class="guitar__string-wrap">
							<rect class="guitar__string-hover" note:id="38" x="184.5" y="634.1" width="1740.7" height="13.2">
							</rect>
							<line class="guitar__string" x1="1925.2" y1="640.7" x2="183.6" y2="640.6" />
						</g>
						<g class="guitar__string-wrap">
							<rect class="guitar__string-hover" note:id="43" x="184.5" y="655.7" width="1740.7" height="13.2">
							</rect>
							<line class="guitar__string" x1="1925.2" y1="662.3" x2="183.6" y2="662.2" />
						</g>
					</svg>
				</div><!-- /guitar -->
				<div class="interaction interaction--corner"></div>
			</section>
		</main>
		<!-- for some animations -->
		<script src="js/anime.min.js"></script>
		<!-- helper functions -->
		<script src="js/helper.js"></script>
		<!-- the guitar -->
		<script src="js/guitar.js"></script>
		<!-- main script -->
		<script src="js/main.js"></script>
	</body>
</html>
